export const starsky = function () {
  let canvas,
    context,
    screenW,
    screenH,
    stars = [];

  // 定义常量
  const FPS = 50,
    numStars = 2000;

  window.onload = function () {
    //获取canvas
    canvas = document.getElementById("canvas");
    // 设置画布
    render();
    //获取canvas执行上下文
    context = canvas.getContext("2d");
    // ===========组件应用层============
    //创建星星
    for (let i = 0; i < numStars; i++) {
      let x = Math.round(Math.random() * screenW);
      let y = Math.round(Math.random() * screenH);
      let length = 1 + Math.random() * 2;
      let opacity = Math.random();

      let star = new Star(x, y, length, opacity);
      stars.push(star);
    }

    setInterval(animate, 1000 / FPS);
  };

  // 星星构造函数
  function Star(x, y, length, opacity) {
    this.x = parseInt(x);
    this.y = parseInt(y);
    this.length = parseInt(length);
    this.opacity = opacity;
    this.factor = 1;
    this.increment = Math.random() * 0.03;
  }

  //对象原型方法
  Star.prototype.draw = function (context) {
    context.rotate((Math.PI * 1) / 10);

    context.save();
    context.translate(this.x, this.y);
    if (this.opacity > 1) {
      this.factor = -1;
    } else if (this.opacity <= 0) {
      this.factor = 1;

      // 更新一次星星位置
      this.x = Math.round(Math.random() * screenW);
      this.y = Math.round(Math.random() * screenH);
    }

    this.opacity += this.increment * this.factor;

    context.beginPath();
    //画线
    for (var i = 5; i > 0; i--) {
      context.lineTo(0, this.length);
      context.translate(0, this.length);
      context.rotate((Math.PI * 2) / 10);
      context.lineTo(0, -this.length);
      context.translate(0, -this.length);
      context.rotate(-((Math.PI * 6) / 10));
    }

    context.lineTo(0, this.length);
    context.closePath();

    context.fillStyle = "rgba(255,255,200, " + this.opacity + ")";
    context.shadowBlur = 5;
    context.shadowColor = "#ffff33";
    context.fill();

    context.restore();
  };

  function getScreenInfo() {
    let winWidth, winHeight;
    //获取窗口宽度
    if (window.innerWidth) {
      winWidth = window.innerWidth;
    } else if (document.body && document.body.clientWidth) {
      winWidth = document.body.clientWidth;
    }

    //获取窗口高度
    if (window.innerHeight) {
      winHeight = window.innerHeight;
    } else if (document.body && document.body.clientHeight) {
      winHeight = document.body.clientHeight;
    }

    //通过深入Document内部对body进行检测，获取窗口大小
    if (
      document.documentElement &&
      document.documentElement.clientHeight &&
      document.documentElement.clientWidth
    ) {
      winHeight = document.documentElement.clientHeight;
      winWidth = document.documentElement.clientWidth;
    }

    return {
      winWidth: winWidth,
      winHeight: winHeight,
    };
  }

  /**
   * canvas设置，修复窗口变化，画布大小不变的问题
   */
  function render() {
    //获取屏幕大小
    screenW = getScreenInfo().winWidth;
    screenH = getScreenInfo().winHeight;

    // 设置canvas
    // canvas.setAttribute('width', screenW);
    // canvas.setAttribute('height', screenH);

    canvas.width = screenW;
    canvas.height = screenH;

    window.addEventListener("resize", render);
  }
  // 闪烁
  function animate() {
    context.clearRect(0, 0, screenW, screenH);
    for (let i = 0; i < stars.length; i++) {
      stars[i].draw(context);
    }
  }
};
